<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    <div class="borderTop" v-if="active == 0">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="classify">
              <el-cascader
                v-model="ruleForm.classify"
                :options="options"
                :props='{value:"id",label:"name",children:"child" ,multiple: true}'
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="商品关键字" prop="ProductKeywords">
              <el-input v-model="ruleForm.ProductKeywords"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="ruleForm.unit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="商品简介" prop="introduction">
              <el-input v-model="ruleForm.introduction" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品封面图" prop="surfacePlot">
              <div class="coverPicture" @click="coverPicture(1)">
                <!-- dialogVisible = true -->
                <el-image style="height:50px;width:50px" :src="ruleForm.surfacePlot" v-if="ruleForm.surfacePlot"></el-image>
                <span class="el-icon-camera " v-if="!ruleForm.surfacePlot"></span>
              </div>
              <!--
               -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="商品轮播图" prop="slideshow">
             <div class="coverPicture" @click="coverPicture(2)">
                <!-- dialogVisible = true -->
                <el-image :src="item.sattDir" class="left" v-for="item in ruleForm.slideshow" :key="item.attId"></el-image>
                <span class="el-icon-camera left" ></span>
                <div class="clear"></div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="运费模板" prop="templateFreight">
                 <el-select v-model="ruleForm.templateFreight" placeholder="请选择">
                    <el-option
                      v-for="item in expressshippingtemplateslistData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <el-button @click="templateFreightClick()">运费模板</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="商品规格">
              <el-input v-model="ruleForm.qweqwe"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="佣金设置" >
              <el-input v-model="ruleForm.qweqwe"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-form-item >
              <div><el-button style="margin-top: 60px;" @click="next('ruleForm')">下一步</el-button></div>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="active == 1">
     
      <!-- v-html 就是后端返回给你的数据是html的片段  -->
        <quill-editor class="editor"
            ref="myTextEditor"
            v-model="content"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            @change="onEditorChange($event)">
      </quill-editor>
     <el-button @click="active++">下一步</el-button>
    </div>
    <div v-if="active == 2">
      <div >
        <el-row>
            <el-col :span="8">
              <span>排序：</span>
              <el-input-number v-model="sort"  :min="1" :max="10" label="描述文字"></el-input-number>
            </el-col>
            <el-col :span="8">
              <span>积分：</span>
              <el-input-number v-model="giveIntegral" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-col>
            <el-col :span="8">
              <span>虚拟销量：</span>
              <el-input-number v-model="ficti"  :min="1" :max="10" label="描述文字"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
          <el-col>
            <span>商品推荐：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="isHot">是否热卖</el-checkbox>
              <el-checkbox label="isGood">热门榜单</el-checkbox>
              <el-checkbox label="isBenefit">促销单品</el-checkbox>
            <el-checkbox label="isBest">精品推荐</el-checkbox>
            <el-checkbox label="isNew">首发新品</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
        
      </div>
      <span class="left">活动优先级：</span>
      <draggable  class="left" v-model="colors" @update="datadragEnd" v-bind = "{draggable:'.drag-item',animation:500}">
            <transition-group>
                <div v-for="element in colors" :key="element.text" class = "drag-item">
                    {{element.text}}
                </div>
            </transition-group>
    </draggable>
    <div class="clear"></div>
    <div class="">
      <el-button @click="addShop()">提交</el-button>
    </div>
    </div>
    
  
    <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="handleClose"
    >
      <div class="dialogVisiblebox">
        <div class="left leftBox">
          <div>
            <el-input
              prefix-icon="el-icon-search"
              v-model="categoryName"
              @input="categorylisttreedialog()"
            ></el-input>
          </div>
          <div class="roll">
            <el-tree
              :data="data"
              node-key="id"
              :expand-on-click-node="false"
              :props="{
                 children: 'child',
                label: 'name'
              }"
               @node-click="handleNodeClick"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }" >
                <span class="nodelabel">{{ data.name }}</span>

                <el-popover 
                placement="bottom-end" 
                width="160" 
                v-model="visible" 
                trigger="hover">
                  <div style>
                    <div>
                      <el-button type="text" @click="categorysaveFn(data.id)">添加分类</el-button>
                    </div>
                    <div>
                      <el-button type="text" 
                      v-if="data.id!=0"
                      @click="categoryeditFn(data.id, data.pid ,data.name, data.sort)">编辑分类</el-button>
                    </div>
                    <div>
                      <el-button 
                      v-if="data.id!=0"
                      type="text" 
                      @click="categoryDelFn(data.id)"
                      >删除分类</el-button>
                    </div>
                  </div>
                  <span class="el-icon-more" slot="reference"></span>
                </el-popover>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="left rightBox">
          <div>
            <el-button  type="primary" class="left1" @click="choosePic()">使用选中图片</el-button>
            <!-- 上传图片 表单提交 文件流提交  -->
            <!-- <el-button><span class="el-icon-upload2"></span></el-button> -->
            <el-upload
              class="left1"
              action
              :show-file-list="false"
              multiple
              :limit="3"
              :http-request="httprequest"
              
              :on-exceed="handleExceed"
             >
             <!-- http-requeset 自定义上传行为 不采用el-upload默认行为 -->
              <el-button><span class="el-icon-upload2"></span></el-button>
            </el-upload>
            <el-button class="left1" type="danger" @click="deletePic()"><span class="el-icon-delete-solid"></span></el-button>
            <el-select class="left1">
              <el-option class="optiontree">
                 <el-tree
              :data="data"
              node-key="id"
              @node-click="optiontreeClick"
              :expand-on-click-node="false"
              :props="{
                 children: 'child',
                label: 'name'
              }"
            >
            </el-tree>
              </el-option>
            </el-select>
            <div class="clear"></div>
          </div>
          <div>
              <div class="picList">
                <div class="imagebox" 
                v-for="(item,index) of systemattachmentlistData"
                :key="item.attId"
                :class="item.isSelect?'active':''"
                >
                  <el-image @click="imgTableClick(item,index)" :src="item.sattDir"></el-image>
                  <span class="imageBoxNumber" v-if="item.isSelect">{{item.num}} </span>
                </div>
                
                <div class="clear"></div>
              </div>
              <div>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage11"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="systemattachmenttotal">
                  </el-pagination>
              </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </el-dialog>
    <el-dialog
      :title="classruleForm.id?'编辑分类':'添加分类'"
      :visible.sync="dialogVisibleadd"
      width="700px"
      :before-close="handleClose"
    >
      <div>
        <el-form 
        :rules="classrules" 
        :model="classruleForm"
        ref="classruleForm"
        >
          <el-form-item label="上级分类" prop="reclassify">
            <el-cascader
              class="cascaderStyle"
              v-model="classruleForm.reclassify"
              :options="data"
              :props='{value:"id",label:"name",children:"child" ,checkStrictly: true }'
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="分类名称" prop="reclassifyName">
            <el-input
              v-model="classruleForm.reclassifyName"
              placeholder="分类名称"
              class="cascaderStyle"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="reclassifySort">
            <el-input-number v-model="classruleForm.reclassifySort" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label>
            <el-button @click="submitFormclass('classruleForm')">确定</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      title="运费模板"
      :visible.sync="templateFreightAdd"
      width="1000px"
    > 
        <el-form
        :model="templateFreightruleForm"
        
        ref="templateFreightruleForm"
        label-width="200px"
        class="demo-ruleForm"
      >
      
            <el-form-item label="模板名称" 
            prop="name"
                      :rules="{
                        required: true, message: '不能为空', trigger: 'blur'
                      }">
              <el-input v-model="templateFreightruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="计费方式" >
                <el-radio v-model="templateFreightruleForm.chargeMode" label="1">按件数</el-radio>
                <el-radio v-model="templateFreightruleForm.chargeMode" label="2">按重量</el-radio>
                 <el-radio v-model="templateFreightruleForm.chargeMode" label="3">按体积</el-radio>
            </el-form-item>
            <!-- <el-form-item label="配送区域及运费"> -->
              <div class="DistributionAreaFreight">配送区域及运费</div>
              <kw16superTable
              class="DistributionAreaFreightTable"
                    :tableData="tableData"
                    :headerData="headerData"
                    :ispagination="false"
                    height="inherit"
                  >
                  <template v-slot:AreaDistribution="{row}">
                      <div>
                        <div v-if="row.$index == 0">默认全国</div>
                        <div v-else>
                          {{row.AreaDistribution}}
                            <el-cascader
                             v-model="row.AreaDistribution"
                              :options="ProvinceList"
                              :props='{value:"cityId",label:"name",children:"child" ,multiple: true}'
                              collapse-tags
                              clearable></el-cascader>
                          <!--  -->
                        </div>
                      </div>
                  </template>
                  <template v-slot:FirstVolume="{row}">
                    <el-form-item
                    :prop="'tableData['+row.$index+'].FirstVolume'"
                      :rules="{
                        required: true, message: '不能为空', trigger: 'blur'
                      }"
                    >
                  
                        <el-input v-model="row.FirstVolume"></el-input>
                    </el-form-item>
                  </template>
                  <template v-slot:freight="{row}">
                   
                       <el-form-item
                    :prop="'tableData['+row.$index+'].freight'"
                      :rules="{
                        required: true, message: '不能为空', trigger: 'blur'
                      }"
                    >
                        <el-input v-model="row.freight"></el-input>
                    </el-form-item>
                  
                  </template>
                  <template v-slot:Carryingvolume="{row}">
                   <el-form-item
                    :prop="'tableData['+row.$index+'].Carryingvolume'"
                      :rules="{
                        required: true, message: '不能为空', trigger: 'blur'
                      }"
                    >
                        <el-input v-model="row.Carryingvolume"></el-input>
                    </el-form-item>
                  </template>
                   <template v-slot:renew="{row}">
                     <el-form-item
                    :prop="'tableData['+row.$index+'].renew'"
                      :rules="{
                        required: true, message: '不能为空', trigger: 'blur'
                      }"
                    >
                        <el-input v-model="row.renew"></el-input>
                    </el-form-item>
                  </template>
                  <!--AreaDistribution FirstVolume freight Carryingvolume renew -->
              </kw16superTable>
              <el-button type="primary" size="mini"  @click="AddingDeliveryArea()">添加配送区域</el-button>
           
              <div class="clear"></div>
       
              <el-form-item label="排序" >
                <el-input v-model="templateFreightruleForm.sort"></el-input>
              </el-form-item>
          <el-button type="primary" @click="submitFormFreight('templateFreightruleForm')">提交</el-button>
         
        </el-form-item>
            <!-- </el-form-item> -->
        </el-form>
         
    </el-dialog>

  </div>
</template>
<script>
import { 
  categorylisttree, 
  categorysave  ,
  categoryupdate,
  categorydelete,
  systemattachmentlist,
  uploadimage,
  systemattachmentmove,
  systemattachmentdelete,
  expressshippingtemplateslist,
  expressshippingtemplatessave,
  storeproductsave
  } from "@/api/shop";
  import kw16superTable from "@/components/kw16superTable";
 import draggable from 'vuedraggable'
  import { getProvince}  from "@/config/config";
export default {
  name: "storeAdd",
  data() {
    return {
      // name classify ProductKeywords unit introduction sattDir templateFreight slideshow
        rules: {
          name: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          classify: [
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ProductKeywords: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          unit: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          introduction: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          surfacePlot: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          slideshow: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          templateFreight: [
            { required: true, message: '不能为空', trigger: 'change' }
          ],
        },
        content:"",
      colors: [
                    {
                        text: "秒杀",
                    }, 
                    {
                        text: "砍价",
                    }, 
                    {
                        text: "默认",
                    }, 
                    {
                        text: "拼团",
                    }
                ],
                startArr:[],
                endArr:[],
                count:0,
      content: null,
            editorOption: {
              modules: {
                toolbar: [
                  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                  ["blockquote", "code-block"], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                  [{ script: "sub" }, { script: "super" }], // 上标/下标
                  [{ indent: "-1" }, { indent: "+1" }], // 缩进
                  // [{'direction': 'rtl'}],                         // 文本方向
                  [{ size: ["small", false, "large", "huge"] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ["clean"], // 清除文本格式
                  ["link", "image", "video"] // 链接、图片、视频
                ], //工具菜单栏配置
              },
              placeholder: '请在这里添加产品描述', //提示
              readyOnly: false, //是否只读
              theme: 'snow', //主题 snow/bubble
              syntax: true, //语法检测
        },
      tableData:[
        {
          AreaDistribution:"", 
          FirstVolume:"", 
          freight:"", 
          Carryingvolume:"", 
          renew:""
        }
      ],
      headerData:[
        {
          prop: "AreaDistribution",
          label: "可配送区域",
          slot:true,
          width: "180"
        },
        {
          prop: "FirstVolume",
          label: "首件体积（m3）",
          slot:true,
          width: "180"
        },
        {
          prop: "freight",
          label: "运费（元）",
          slot:true,
          width: "180"
        },
        {
          prop: "Carryingvolume",
          label: "续建体积（m3）",
          slot:true,
          width: "180"
        },
        {
          prop: "renew",
          label: "续费（元）",
          slot:true,
          width: "180"
        },
      ],
      data: [],
     sort:"", 
     giveIntegral:"", 
     ficti:"", 
     checkList:"",
      templateFreightruleForm:{
        name:"",
        chargeMode:"",
        sort:"0"
      },
      classruleForm: {
        reclassify: [],
        reclassifyName: "",
        reclassifySort: ""
      },
      classrules: {
        reclassify: [
          { required: true, message: "请选择分类", trigger: "change" }
        ],
        reclassifyName: [
          { required: true, message: "请选择分类名称", trigger: "blur" }
        ]
      },
      dialogVisibleadd: false,
      dialogVisible: false,
      active: 0,
      categoryName: "",
      ruleForm: {
        name: "",
        classify: [],
        ProductKeywords: "",
        unit: "",
        introduction: "",
        surfacePlot :"",
        slideshow:[],
        templateFreight:""
      },
      result: "",
      systemattachmentpage:1, 
      systemattachmentlimit:10,
       systemattachmentlistData:[],
      options: [],
      treeid:0,
      currentPage11:1,
      systemattachmenttotal:0,
      imageListCopy:[],
      coverPicturenum:"",
      templateFreightAdd:false,
      expressshippingtemplateslistData:[],
      ProvinceList:[]
    };
   
  },
  
 async mounted() {
    // 获取分类
    let _self = this;
    _self.categorylisttreeSearch();
    _self.systemattachmentlistSearch()
    _self.expressshippingtemplateslistSearch();
    _self.ProvinceList =await getProvince();
    // 
    // _self.templateFreightruleForm 加入tableData 并且加入表格数据
    // 考虑tableData和和templateFreightruleForm里面如果新加的tableData数据产生数据的互相影响
    _self.$set(_self.templateFreightruleForm ,"tableData", _self.tableData);
    //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }

  },//  组件注册
  components: {
        kw16superTable,
        draggable
      },
      
  methods: {
    // 新增商品
    addShop(){
      let _self= this;
      let list = [];
      for(let item of _self.ruleForm.slideshow){
        list.push(item.sattDir);
      }
      let colors = [];
      for(let item of _self.colors){
        colors.push(item.text)
      }
      let data = {
        "image": _self.ruleForm.surfacePlot,
        "sliderImages":list,
        "videoLink":"",
        "sliderImage":JSON.stringify(list),
        "storeName":_self.ruleForm.name,
        "storeInfo":_self.ruleForm.introduction,
        "keyword":_self.ruleForm.ProductKeywords,
        "cateIds":_self.ruleForm.classify,
        "cateId":_self.ruleForm.classify.join(),
        "unitName":_self.ruleForm.unit,
        "sort":_self.sort,
        "giveIntegral":_self.giveIntegral,
        "ficti":_self.ficti,
        "isShow":false,
        "isBenefit":_self.checkList.indexOf("isBenefit") == -1?false:true,
        "isNew":_self.checkList.indexOf("isBenefit") == -1?false:true,
        "isGood":_self.checkList.indexOf("isGood") == -1?false:true,
        "isHot":_self.checkList.indexOf("isHot") == -1?false:true,
        "isBest":_self.checkList.indexOf("isBest") == -1?false:true,
        "tempId":_self.ruleForm.templateFreight,
        "attrValue":[
          {
            "image":"http://47.116.74.106:8080/crmebimage/public/content/2022/11/07/2861981a8b414741b4804865d69c3c3atxb1c3riis.jpg",
            "price":0,
            "cost":0,
            "otPrice":0,
            "stock":0,
            "barCode":"",
            "weight":0,
            "volume":0,
            "brokerage":null,
            "brokerageTwo":null,
            "attrValue":"{\"规格\":\"默认\"}"
            }
        ],
        "attr":[
          {
            "attrName":"规格",
            "attrValues":"默认",
            "id":0
          }
      ],
 
      "isSub":true,
      "content":_self.content,
      "specType":false,
      "couponIds":[],
      "coupons":[],
      "activity":colors
      }
      storeproductsave(data).then(res=>{
        console.log(res)
        if(res.code==200){
          // _self.$router.back()//返回上一个路由
          _self.$router.go(-1)//.go(-x) x返回x层路由
        }
      })
    },
    // 拖拽
            getdata (evt) {
                console.log(evt.draggedContext.element.text)
            },
            datadragEnd (evt) {
                evt.preventDefault();
                console.log('拖动前的索引 :' + evt.oldIndex)
                console.log('拖动后的索引 :' + evt.newIndex)
                console.log(this.colors);//拖拽排序后会改变原先数据索引(排序)
                console.log("获取拖拽改变数据索引后，拖动前的索引的元素 :" +             
                this.colors[evt.oldIndex]); 
                console.log("获取拖拽改变数据索引后，被拖拽的元素 :"+     
                this.colors[evt.newIndex]);
            },

    // 添加配送区域
    AddingDeliveryArea(){
      let _self = this;
      _self.tableData.push( {
          AreaDistribution:"", 
          FirstVolume:"", 
          freight:"", 
          Carryingvolume:"", 
          renew:""
        })
        // _self.$set(_self.templateFreightruleForm ,"tableData", _self.tableData)
        // _self.$forceUpdate()
    },
      
      submitFormFreight(formName) {
        let _self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
              let data = {
                  "appoint":false,
                  "name":_self.templateFreightruleForm.name,
                  "sort":_self.templateFreightruleForm.sort,
                  "type":_self.templateFreightruleForm.chargeMode,
                  "shippingTemplatesRegionRequestList":[]
                }
              
                for(let index in _self.tableData){
                  if(index==0){
                    data.shippingTemplatesRegionRequestList.push({
                        "first":_self.tableData[0].FirstVolume,
                        "firstPrice":_self.tableData[0].freight,
                        "renewal":_self.tableData[0].Carryingvolume,
                        "renewalPrice":_self.tableData[0].renew,
                        "city_ids":[],
                        "title":"[[0,0]]",
                        "cityId":"all"
                    })
                  }else{
                    data.shippingTemplatesRegionRequestList.push({
                        "first":_self.tableData[index].FirstVolume,
                        "firstPrice":_self.tableData[index].freight,
                        "renewal":_self.tableData[index].Carryingvolume,
                        "renewalPrice":_self.tableData[index].renew,
                        "city_ids":_self.tableData[index].AreaDistribution,
                        "title":JSON.stringify(_self.tableData[index].AreaDistribution),
                        "cityId": [..._self.tableData[index].AreaDistribution.flat(1)].join()
                    })
                  }
                }
                expressshippingtemplatessave(data).then(res=>{
                  console.log(res);
                  if(res.code == 500){
                    _self.$message(res.message)
                  }else{
                    _self.templateFreightAdd = false;
                    _self.expressshippingtemplateslistSearch();
                  }
                })
                   
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 打开模板弹窗
    templateFreightClick(){
      let _self = this;
      _self.templateFreightAdd = true;
    },
    // 模板列表
    expressshippingtemplateslistSearch(){
      let _self = this;
      expressshippingtemplateslist().then(res=>{
        // console.log(res.data.list)
        _self.expressshippingtemplateslistData = res.data.list;
      })
    },
    // 选中图片
    choosePic(){
      let _self = this;
      if(_self.imageListCopy.length==0){
        _self.$message("请选择图片")
        
      }else{
      if(_self.coverPicturenum == 1){
            if(_self.imageListCopy.length==1){
    
                _self.ruleForm.surfacePlot  = _self.imageListCopy[0].sattDir;
                _self.dialogVisible = false;
            }else{
              _self.$message("请选择一张图片")
            }
          }else{
            _self.ruleForm.slideshow = JSON.parse(JSON.stringify(_self.imageListCopy));
            _self.dialogVisible = false;
    
          }
          
      }
    
    },
    // 删除图片中的分类
    deletePic(){
      let _self = this;
      let list = []; 
          for(let item of _self.imageListCopy){
              list.push(item.attId)
          }
          console.log(list.join())
        systemattachmentdelete(list.join()).then(res=>{
            _self.systemattachmentlistSearch()
            _self.imageListCopy=[];
        })
    },
    // 图片移至分类
    optiontreeClick(da){
      console.log(da)
      let _self = this;
      if(_self.imageListCopy.length>0){
          // data.id
          let list = []; 
          for(let item of _self.imageListCopy){
              list.push(item.attId)
          }
          let data ={
            attrId: list.join(","),
            pid: da.name=="全部图片" ?10000:da.id
          }
          systemattachmentmove(data).then(res=>{
            console.log(res)
            if(res.code == 200){
                _self.systemattachmentlistSearch()
                _self.imageListCopy=[];
            }
          })
      }else{
        _self.$message("请选择图片")
      }
    },
    // httprequest 上传图片
    imgTableClick(item , index){
      let _self = this;
      let type = false;
      console.log(_self.imageListCopy)
        console.log(item.attId)
      for(let inde in _self.imageListCopy ){
   
            if(_self.imageListCopy[inde].attId == item.attId){
              type = true;
              _self.imageListCopy.splice(inde,1)
        }
        
      
      }
      if(!type){
        _self.imageListCopy.push(item)
      }
      // _self.systemattachmentlistData
      // _self.imageListCopy
      // _self.systemattachmentlistData[index].isSelect = !_self.systemattachmentlistData[index].isSelect;
      console.log(_self.systemattachmentlistData[index])
      _self.$set(_self.systemattachmentlistData[index], "isSelect" ,!_self.systemattachmentlistData[index].isSelect )
      for(let indexx in _self.imageListCopy){
        for(let items of _self.systemattachmentlistData){
          if(items.attId == _self.imageListCopy[indexx].attId){
            _self.$set(items , "num" , indexx*1+1)
          }
        }
      }
   },
    httprequest(par){
      console.log(par)
      // par.flie当前图片对象
      let _self = this;
      let data = {
        model:"content",
        pid:"0"
      }
      let formatDate = new FormData();//新建表单构造函数
      formatDate.append("multipart" , par.file)//接口文档的key值 ，当前图片对象
      uploadimage(formatDate , data).then(res=>{
        console.log(res)
        _self.systemattachmentpage = 1;
        _self.systemattachmentlistSearch()
      })
    },
     handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        let _self = this;
        _self.systemattachmentlimit = val;
        _self.systemattachmentlistSearch()
      },
      handleCurrentChange(val) {
        let _self = this;
        console.log(`当前页: ${val}`);
        _self.systemattachmentpage = val;
        _self.systemattachmentlistSearch()
      },
    // 点击分类树
    handleNodeClick(data) {
        console.log(data);
        let _self = this;
        _self.treeid = data.id;
        _self.systemattachmentlistSearch()
    },
    // 请求分类的图片数据
    systemattachmentlistSearch(){
      let _self = this;
      let data = {
          page:_self.systemattachmentpage,
          limit:_self.systemattachmentlimit,
          pid:_self.treeid,
          attType:"jpg,jpeg,gif,png,bmp,PNG,JPG"
      }
      systemattachmentlist(data).then(res=>{
          // console.log(res)
          _self.systemattachmentlistData = res.data.list;
          _self.systemattachmenttotal = res.data.total;
        _self.currentPage11 = res.data.page;
      })
    },
    // 删除分类
    categoryDelFn(id){
      let _self = this;
      let data = {id};
      categorydelete(data).then(res=>{
        console.log(res);
        if(res.code== 500){
          _self.$message(res.message)
        }else{
          _self.$message(res.message);
           _self.categorylisttreedialog()
        }
      })
    },
    // 编辑分类按钮
    // id pid name sort
    categoryeditFn(id,pid ,name ,sort){
      let _self = this;
     _self.classruleForm.reclassify = [];
     _self.Recursion(pid, _self.data, "");
     _self.classruleForm.reclassifyName = name;
     _self.classruleForm.reclassifySort = sort;
     _self.classruleForm.id = id;
     _self.dialogVisibleadd = true;
    //  _self.classruleForm={
    //     reclassify: [],
    //     reclassifyName: "",
    //     reclassifySort: ""
    //   },
    },
    // 添加分类的确定按钮
     submitFormclass(formName) {
      let _self= this;
        _self.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
         
            let data ={
                name:_self.classruleForm.reclassifyName,
                pid:_self.classruleForm.reclassify[_self.classruleForm.reclassify.length-1],
                sort:_self.classruleForm.reclassifySort,
                status:0,
                type:2
            }
            if(_self.classruleForm.id){
              // 编辑
              data.id = _self.classruleForm.id;
              console.log(data)
              categoryupdate(data).then(res=>{
                // console.log(res)
                if(res.code == 200){
                   _self.$message("新增成功");
                    _self.dialogVisibleadd = false;
                    _self.categorylisttreedialog()
                    _self.$refs[formName].resetFields();//只会重置需要校验的 不需要校验的需要手动代码重置
                }
              })
            }else{
                categorysave(data).then(res=>{
                  // console.log(res)
                  if(res.code ==500){
                    _self.$message(res.message)
                  }else{
                    _self.$message("新增成功");
                    _self.dialogVisibleadd = false;
                    _self.categorylisttreedialog()
                    _self.$refs[formName].resetFields();//只会重置需要校验的 不需要校验的需要手动代码重置
                  }
                })
            }
        
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 添加分类
    categorysaveFn(id) {
      let _self = this;
      // console.log(_self.Recursion(id , _self.data ,""))
       _self.classruleForm.id = "";
      _self.classruleForm.reclassify = [];
      _self.Recursion(id, _self.data, "");
      _self.dialogVisibleadd = true;
    },
    // 递归
    Recursion(id, data, str) {
      let _self = this;

      if (data) {
        for (let item of data) {
          if (id == item.id) {
            let list = `${str}/${item.id}`.slice(1).split("/");
            for (let item of list) {
              _self.classruleForm.reclassify.push(item * 1);
            }
            return false;
          } else {
            console.log(str);
            _self.Recursion(id, item.child, `${str}/${item.id}`);
          }
        }
      }
    },
    // 打开弹窗
    coverPicture(num) {
      let _self = this;
      _self.coverPicturenum = num;
      // _self.dialogVisible = true;
            _self.systemattachmentlistSearch()
            _self.imageListCopy=[];
      _self.categorylisttreedialog();
    },
    //弹窗的分类

    categorylisttreedialog() {
      let _self = this;
      let data = {
        status: -1,
        type: 2,
        name: _self.categoryName.trim()
      };
      categorylisttree(data).then(res => {
        console.log(res);
        _self.data = [];
        _self.data.push({
          name: "全部图片",
          id:0
        });
        _self.data = [..._self.data, ...res.data];
        _self.dialogVisible = true;
      });
    },
    categorylisttreeSearch() {
      let _self = this;
      let data = {
        status: -1,
        type: 1,
        name:""
      };
      categorylisttree(data).then(res => {
        console.log(res.data);
        _self.options = res.data;
      });
    },
    next(formName) {
      let _self = this;
        _self.$refs[formName].validate((valid) => {
          if (valid) {
            _self.active++
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    
  }
};
</script>
<style lang="less">
.left{
  float: left;
}
.clear{
  clear: both;
}
.test{
        border:1px solid #ccc;
    }
    .drag-item{
       height: 50px;
      line-height: 50px;
      margin: 0 10px;
      position: relative;
      float: left;
      background: #ddd;
      margin-top: 20px;

    }
    .ghostClass{
        opacity: 1;
    }
    .bottom{
        width: 200px;
        height: 50px;
        position: relative;
        background: blue;
        top:2px;
        left: 2px;
        transition: all .5s linear;
    }
.DistributionAreaFreight{
    width: 200px;
    float: left;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;

}
.DistributionAreaFreightTable{
  float: left;
    width: calc(100% - 200px);
    .el-form-item__content{
      margin-left: 0 !important;
    }
}
.clear{
  clear: both;
}
.coverPicture .left{
    float: left;
    width: 50px;
    height: 50px;
}
.coverPicture .clear{
  clear: both;
}
.picList{
    margin-top: 30px;
}
.picList .imagebox{
  float: left;
  position: relative;
   border: 1px solid transparent;
}
.picList .active{
 border: 1px solid blue;
}
.picList .imagebox .imageBoxNumber{
  color: #fff;
  background-color: blue;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.picList .imagebox .el-image{
  width: 110px;
  height: 110px;
}
.clear{
  clear: both;
}
.optiontree::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.optiontree{
  height: 200px;
    overflow: scroll;
        scrollbar-width: none; /* Firefox */
        background-color: #fff;
    -ms-overflow-style: none; /* IE 10+ */
}
.cascaderStyle {
  width: inherit;
}
.borderTop {
  border-top: 1px solid #ddd;
  padding-top: 50px;
  margin-top: 50px;
  .el-cascader,
  .el-tag {
    display: block;
  }
  .coverPicture span{
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    display: block;
    font-size: 28px;
      color: #ddd;
      font-weight: lighter;
  
    box-sizing: border-box;
   
  }
}
.dialogVisiblebox .roll::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.el-popover {
  min-width: 0;
  width: initial !important;
}
.dialogVisiblebox {
  .roll {
    height: 320px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow: scroll;
  }
  .left1{
    float: left;
    margin-right: 10px;
  }
  .left {
    float: left;
    
    width: calc(100% - 275px);
    box-sizing: border-box;
    padding-left: 30px;
  }
  .clear {
    clear: both;
  }
  .leftBox {
    width: 275px;
  }
  .el-tree-node__content {
    display: block;
    .nodelabel {
      color: aqua;
    }
    .el-icon-more {
      float: right;
      display: none;
      margin-right: 4px;
      margin-top: 4px;
      font-size: 22px;
    }
  }
}
.dialogVisiblebox .el-tree-node__content:hover .el-icon-more {
  display: block;
}
.editor {
    line-height: normal !important;
    
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }

</style>